import React from 'react';
import { Card, Breadcrumb, Tag, Divider } from 'antd';
import { HomeOutlined } from '@ant-design/icons';
import { Link, useParams } from 'react-router-dom';
import MainLayout from '../../components/MainLayout';
import styles from './detail.module.less';

const AnnouncementDetail: React.FC = () => {
  const { id } = useParams();

  // 模拟公告详情数据
  const announcement = {
    id,
    title: '关于开展2024年度档案预验收工作的通知',
    type: '验收通知',
    publishTime: '2024-03-15 10:30',
    publisher: '张三',
    content: `
      各相关单位：
      
      为做好2024年度档案预验收工作，现将有关事项通知如下：
      
      一、验收时间安排
      预验收工作将于2024年4月1日开始，为期两周。
      
      二、验收材料要求
      请各单位按照《档案资料验收清单》要求准备相关材料。
      
      三、注意事项
      1. 请严格按照要求准备材料
      2. 确保材料的完整性和规范性
      3. 按时提交验收申请
      
      特此通知。
    `
  };

  return (
    <MainLayout>
      <div className={styles.breadcrumb}>
        <Breadcrumb items={[
          {
            title: <Link to="/home"><HomeOutlined /> 首页</Link>,
          },
          {
            title: <Link to="/announcement">内部公告</Link>,
          },
          {
            title: '公告详情',
          }
        ]} />
      </div>

      <Card className={styles.detailCard}>
        <div className={styles.header}>
          <h1 className={styles.title}>{announcement.title}</h1>
          <div className={styles.meta}>
            <Tag color="blue">{announcement.type}</Tag>
            <span>发布时间：{announcement.publishTime}</span>
            <span>发布人：{announcement.publisher}</span>
          </div>
        </div>
        <Divider />
        <div className={styles.content}>
          {announcement.content.split('\n').map((paragraph, index) => (
            <p key={index}>{paragraph}</p>
          ))}
        </div>
      </Card>
    </MainLayout>
  );
};

export default AnnouncementDetail; 